<!DOCTYPE html>
<html>
<head>
    <title>活动列表 {$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}"/>
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="rixin">
    <meta name="referrer" content="origin">
    <tc_include file="Public:head"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            zoom: 1;
        }

        .mult_line_ellipsis4 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .mult_line_ellipsis2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .ellipsis1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*轮播图*/
        .focus {
            width: 1198px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            background-color: #000;
            margin-top: -16px;

        }

        .focus li img {
            width: 100%;
            height: 468px;
        }

        .focus_view {
            width: 1200px;
            height: 110px;
            background: url("/public/images/img/lbt_bar.png") no-repeat center;
            color: #fff;
            font-size: 42px;
            text-align: center;
            overflow: hidden;
            position: fixed;
            top: 40px;
            margin-bottom: 20px;
            display: none;

        }

        .focus_view p {
            margin: 47px;
            height: 100%;
            line-height: 47px;
            color: #fff;
        }

        .activity, .expert, .activity {

            clear: both;
            background-color: #000810;
            margin-left: -1px;
        }

        .activity h2, .expert h2, .project h2 {
            width: 1188px;
            height: 50px;
            padding-top: 30px;
            font-size: 22px;
            color: #fff;
            line-height: 38px;
            font-weight: normal;
            background-color: #000232;
            line-height: 37px;
            margin: 0 auto;
            padding-left: 10px;
            background: linear-gradient();

        }

        .activity .more, .expert .more, .project .more {
            font-size: 16px;
            margin-left: 15px;
            line-height: 27px;
        }

        .activity .more a, .expert .more a, .project .more a {
            color: #5d8dfe;
        }

        /*搜索条样式*/
        .top_search {

            text-align: center;
            width: 518px;
            margin: 28px auto 58px;

        }

        .top_search input {
            width: 406px;
            height: 36px;
            line-height: 36px;
            padding: 0 6px;
            border: 1px solid #000232;
            border-radius: 10px;
            margin-right: 26px;
            margin-top: 0px;
            margin-bottom: 0px;
            display: inline-block;
        }

        .top_search span {
            display: inline-block;
            width: 72px;
            height: 36px;
            background: url("/public/images/img/search.svg") no-repeat center;
            -webkit-background-size: 72px 26px;
            background-size: 72px 26px;
            float: right;

        }

        /*active_content 活动列表内容样式*/
        .active_content {
            width: 1198px;
            margin: 0 auto;
        }

        .active_content_larea {
            float: left;
            width: 784px;
        }

        .active_content_larea h4, .active_content_rarea h4 {
            font-size: 16px;
            color: #333333;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0 0 20px;
            padding-left: 14px;
        }

        .active_item {
            width: 350px;
            margin-right: 42px;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            border-radius: 10px;
            padding-bottom: 1px;
            float: left;
            margin-bottom: 46px;
            position: relative;
        }

        .active_item img {
            width: 100%;
            height: 200px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .active_item .form {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            margin-top: 8px;
        }

        .active_item .title {
            font-size: 24px;
            font-weight: bolder;
            line-height: 28px;
            margin-top: 6px;
            height: 56px;
        }

        .active_item .words {
            font-size: 16px;
            line-height: 20px;
            color: #333333;
            margin-top: 5px;
        }

        .active_item .timer {
            font-size: 14px;
            color: #333333;
            margin: 5px 0;
            line-height: 18px;

        }

        .active_item .btm {
            margin: 0 15px;
        }

        /*标签样式*/
        .active_item .active_lable {
            width: 22px;
            height: 54px;
            position: absolute;
            top: -10px;
            left: 20px;
            background-color: #c5c5c5;
            text-align: center;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            padding: 2px 0;

        }

        .active_item .active {
            background-color: #e3252d;
        }

        .active_content_rarea {
            float: right;
            width: 350px;
        }

        /*日历插件样式*/
        ul, ol, li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #demo {
            width: 330px;

        }

        p {
            margin: 0;
        }

        #dt {
            margin: 30px auto;
            height: 28px;
            width: 200px;
            padding: 0 6px;
            border: 1px solid #ccc;
            outline: none;
        }

        /*热门嘉宾样式*/
        /*专栏作者样式独立版*/
        .expert_info {

        }

        .expert_info .expert_info_item {
            width: 330px;
            height: 80px;
            position: relative;
            border: 1px solid rgba(0, 2, 50, 0.5);
            float: left;
            margin-top: 50px;
            margin-left: 0px;
        }

        .expert_info_item .ground_img {
            width: 60px;
            height: 60px;
            position: absolute;
            top: -30px;
            left: 18px;
        }

        .expert_info_item .ground_img img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .expert_info_item .info_top {
            padding-left: 88px;
            color: #000232;
            margin-top: -26px;
        }

        .expert_info_item .info_top .name {
            font-size: 18px;
            font-weight: 500 !important;
            color: #000232;

        }

        .expert_info_item .info_top span {
            color: #000232;
            font-size: 14px;
            font-weight: bolder;
        }

        .expert_info_item .text {
            font-size: 14px;
            color: #707070;
            margin: 10px 16px 16px;
            line-height: 20px;
        }

        .expert_info_item .info_top .company {
            box-sizing: border-box;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .address {
            float: right;
        }

        .active_item:hover {
            transform: scale(1.02,1.02);
            box-shadow: 6px 2px 17px 1px rgba(0,0,0,.1);
        }

    </style>
    <link rel="stylesheet" href="/public/carousel/carousel.css">
    <link rel="stylesheet" href="/public/calendar/calendar.css">
</head>
<body class="body-white">
<tc_include file="Public:nav"/>

<div class="container tc-main" style="">
    <!--轮播图-->
    <div>
        <div id="slider" class="focus">
        </div>
    </div>

    <!--搜索-->
    <div class="top_search">
        <input type="text" id="search" name="search" value="{$search}">
        <span class="searhc_btn"></span>
    </div>

    <!--活动列表内容、右侧边栏内容-->
    <div class="active_content clearfix">
        <div class="active_content_larea">

            <if condition="empty($search)">
                <h4>所有活动</h4>
            <else/>
                <h4>有关"{$search}"的搜索结果</h4>
            </if>

            <div class="active_items">
                <volist name="lists" id="vo">
                    <a class="act_item" href="{$vo.link_addr}">
                        <div class="active_item">
                            <div class="img_ground">
                                <img src="{:sp_get_asset_upload_path($vo['thumb']['thumb'])}" alt="">
                            </div>
                            <div class="btm">
                                <p class="form">{$vo.form_type_name}</p>
                                <h2 class="mult_line_ellipsis2 title">{$vo.name}</h2>
                                <p class="words">{$vo['label_names'][0]}</p>
                                <p class="timer">
                                    <span>{$vo.start_time}</span> - <span>{$vo.end_time}</span>
                                    <span class="address">{$vo.city_name}</span>
                                </p>
                            </div>
                            <span class="active_lable {$vo['act_status_code'] == 3 ? '' : 'active'}">{$vo.act_status}</span>
                        </div>
                    </a>
                </volist>

                <!--加载更多-->
                <div style="width:110px;height: 30px;border-radius: 15px;border: 1px solid #C8161D; color: #C8161D;font-size: 15px;text-align: center;
            line-height: 30px;margin-left: 350px; " class="js-infinite-scroll-loading text-center fontmsyhbd">更多活动</div>
                <div id="nextpage"></div>
            </div>
        </div>

        <div class="active_content_rarea">
            <h4>活动日历</h4>
            <div id="demo">
                <div id="ca"></div>
                <!--<input type="text" id="dt" placeholder="trigger calendar">-->
                <!--<div id="dd"></div>-->
            </div>


            <!--热门嘉宾样式-->
            <php>
                $act_guest = get_act_guest();
            </php>
            <if condition="!empty($act_guest)">
                <h4 style="margin-top: 32px;">热门嘉宾</h4>
                <div class="expert_info clearfix ">
                    <ul>
                        <volist name="act_guest" id="vo">
                            <a href="{:U('User/Index/professor_homepage', ['professor_id' => $vo['id']])}">
                                <li class="expert_info_item">
                                    <div class="ground_img">
                                        <img src="{:sp_get_user_avatar_url($vo['avatar'])}?t={:time()}" alt="">
                                    </div>
                                    <div class="info_top">
                                        <p class="name">{$vo.user_nicename}</p>
                                        <p class="company">
                                            <span>{$vo.position}</span><span style="margin-left: 8px;">{$vo.company}</span>
                                        </p>
                                    </div>
                                    <p class="text ellipsis2">{$vo.signature}</p>
                                </li>
                            </a>
                        </volist>
                    </ul>
                </div>
            </if>
        </div>
    </div>
</div>
<tc_include file="Public:footer"/>

<tc_include file="Public:scripts"/>
<script src="/public/js/jquery.js"></script>
<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
<script src="/public/calendar/js/calendar.js"></script>
<script src="/public/carousel/carousel.js"></script>
<script>
    $(document).ready(function () {
        $('.searhc_btn').click(function () {
            var search = $('#search').val();
            window.location.href = "{:U('Activity/Activity/activity_list')}" + "&search=" + search;
        });

        $('#nextpage').infiniteScroll({
            loading: '.js-infinite-scroll-loading',
            total_pages: {$total_pages},
            success: function (content) {
                var $items = $(content).find('.active_items a');
                if ($items.length > 0) {
                    $('.js-infinite-scroll-loading').before($items);
                }
            }
        });
    })
</script>
<!--日历插件引入-->
<script>
    $('#ca').calendar({
        width: 330,
        height: 330,
        data: [
            {
                date: '1999/2/31',
                value: 'Christmas Eve'
            }
        ],
        onSelected: function (view, date, data) {
            // console.log('view1:' + view)
            // console.log('view2:' + date)
            // console.log('view3:' + data)
        }
    });
</script>
<script>
    var slide_show_lists = <?php echo json_encode(get_slide_show_by_position(12, 0, 3)); ?>;
    $('#slider').sliderImg(slide_show_lists);
</script>
</body>
</html>